<template>
  <div id="home">
    <app-header/>
    <users :users="users" />
    <app-footer/>
  </div>
</template>

<script>
import Users from './Users'
import Header from './Header'
import Footer from './Footer'

export default {
  name: 'Home',
  data() {
    return {
      users:[
            // { name:'Henry', position:'前端工程师', show:false },
            // { name:'Henry', position:'前端工程师', show:false },
            // { name:'Henry', position:'前端工程师', show:false },
            // { name:'Henry', position:'前端工程师', show:false },
            // { name:'Henry', position:'前端工程师', show:false },
            // { name:'Henry', position:'前端工程师', show:false },
            // { name:'Henry', position:'前端工程师', show:false },
            // { name:'Henry', position:'前端工程师', show:false },
            // { name:'Henry', position:'前端工程师', show:false },
            // { name:'Henry', position:'前端工程师', show:false },
            // { name:'Henry', position:'前端工程师', show:false }
        ]
    }
  },
  components: {
    'users':Users,
    'app-header':Header,
    'app-footer':Footer
  },
  created() {
    this.$http.get("http://jsonplaceholder.typicode.com/users").then((data) => {
      this.users = data.body
    })
  }
}
</script>

<style>

</style>
